<template>
  <wd-tabs v-model="tabIndex">
    <wd-tab title="未使用" :name="0">
      <view class="coupon-list">
        <view
          v-for="coupon in couponList"
          :key="coupon._id"
          class="coupon-item">
          <view class="coupon-left">
            <view class="coupon-value">
              <template v-if="coupon.type === 0">
                <text class="amount">{{ coupon.value * 100 }}</text>
                <text class="unit">折</text>
              </template>
              <template v-else>
                <text class="currency">¥</text>
                <text class="amount">{{ coupon.value }}</text>
              </template>
            </view>
            <view class="coupon-threshold">满{{ coupon.threshold }}元可用</view>
          </view>
          <view class="coupon-right">
            <view class="coupon-name">{{ coupon.name }}</view>
            <view class="coupon-time">
              {{ formatDate(coupon.startedAt) }} -
              {{ formatDate(coupon.endedAt) }}
            </view>
            <view class="coupon-scope">
              {{ coupon.universal ? "全场通用" : "指定商品可用" }}
            </view>
          </view>
        </view>
      </view>
    </wd-tab>
    <wd-tab title="已使用" :name="1">
      <view class="coupon-list">
        <view
          v-for="coupon in couponList"
          :key="coupon._id"
          class="coupon-item used">
          <view class="coupon-left">
            <view class="coupon-value">
              <template v-if="coupon.type === 0">
                <text class="amount">{{ coupon.value * 100 }}</text>
                <text class="unit">折</text>
              </template>
              <template v-else>
                <text class="currency">¥</text>
                <text class="amount">{{ coupon.value }}</text>
              </template>
            </view>
            <view class="coupon-threshold">满{{ coupon.threshold }}元可用</view>
          </view>
          <view class="coupon-right">
            <view class="coupon-name">{{ coupon.name }}</view>
            <view class="coupon-time">
              {{ formatDate(coupon.startedAt) }} -
              {{ formatDate(coupon.endedAt) }}
            </view>
            <view class="coupon-scope">
              {{ coupon.universal ? "全场通用" : "指定商品可用" }}
            </view>
            <view class="coupon-used-time"
              >使用时间：{{ formatDate(coupon.usedAt) }}</view
            >
          </view>
        </view>
      </view>
    </wd-tab>
    <wd-tab title="已过期" :name="2">
      <view class="coupon-list">
        <view
          v-for="coupon in couponList"
          :key="coupon._id"
          class="coupon-item expired" >
          <view class="coupon-left">
            <view class="coupon-value">
              <template v-if="coupon.type === 0">
                <text class="amount">{{ coupon.value * 100 }}</text>
                <text class="unit">折</text>
              </template>
              <template v-else>
                <text class="currency">¥</text>
                <text class="amount">{{ coupon.value }}</text>
              </template>
            </view>
            <view class="coupon-threshold">满{{ coupon.threshold }}元可用</view>
          </view>
          <view class="coupon-right">
            <view class="coupon-name">{{ coupon.name }}</view>
            <view class="coupon-time">
              {{ formatDate(coupon.startedAt) }} -
              {{ formatDate(coupon.endedAt) }}
            </view>
            <view class="coupon-scope">
              {{ coupon.universal ? "全场通用" : "指定商品可用" }}
            </view>
          </view>
        </view>
      </view>
    </wd-tab>
  </wd-tabs>
</template>

<script setup>
import { ref, watch } from "vue";
import { getCouponList } from "../../api/coupon";

const tabIndex = ref(0);
const couponList = ref([]);

const formatDate = (dateString) => {
  if (!dateString) return "";
  const date = new Date(dateString);
  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(
    2,
    "0"
  )}.${String(date.getDate()).padStart(2, "0")}`;
};

const getList = async () => {
  const { data } = await getCouponList({
    page: 1,
    pageSize: 9999,
    status: tabIndex.value,
  });
  couponList.value = data.list;
};

watch(tabIndex, getList, { immediate: true });
</script>

<style>
.coupon-list {
  padding: 20rpx;
}

.coupon-item {
  display: flex;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.coupon-left {
  width: 240rpx;
  background: #ff4d4f;
  color: #fff;
  padding: 30rpx 20rpx;
  text-align: center;
  position: relative;
}

.coupon-left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20rpx;
  background: radial-gradient(circle at right, transparent 10rpx, #fff 10rpx);
  background-size: 20rpx 20rpx;
  background-repeat: repeat-y;
}

.coupon-value {
  margin-bottom: 10rpx;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.currency {
  font-size: 32rpx;
}

.amount {
  font-size: 60rpx;
  font-weight: bold;
}

.unit {
  font-size: 32rpx;
  margin-left: 4rpx;
}

.coupon-threshold {
  font-size: 24rpx;
}

.coupon-right {
  flex: 1;
  padding: 30rpx 20rpx;
}

.coupon-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.coupon-time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.coupon-scope {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.coupon-used-time {
  font-size: 24rpx;
  color: #999;
}

.coupon-item.used .coupon-left {
  background: #999;
}

.coupon-item.expired .coupon-left {
  background: #999;
}
</style>
